@charset "UTF-8";
@import "common";
@import "reset";

.wrap {
    header {
        padding-top: 14vw;
        .logo {
            width: 35vw;
            margin: 0 auto;
        }
    }
    main {
        margin-top: 20vw;
        .content {
            #form {
                .input {
                    margin: 0 auto;
                    margin-bottom: 7vw;
                    width: 77vw;
                    height: 10vw;
                    line-height: 10vw;
                    background-color: rgba(255, 255, 255, 0.4);
                    border-radius: 5vw;
                    padding-left: 5vw;
                    input {
                        appearance: none;
                        border: none;
                        outline: none;
                        background-color: transparent;
                        color: #434242;
                    }
                    .tips {
                        line-height: 7vw;
                    }
                }
                .code {
                    position: relative;
                    input {
                        width: 40%;
                    }
                    button {
                        position: absolute;
                        top: 13%;
                        right: 2vw;
                        height: 7vw;
                        background-color: rgba(255, 255, 255, 0.4);
                        box-shadow: 0vw 0.5vw 0.6vw 0.1vw rgba(0, 0, 0, 0.39);
                        border-radius: 5vw;
                        border: none;
                        color: $color;
                        padding: 0 5px;

                        &:active {
                            transform: translateY(1px);
                            transition: all 0.1s;
                        }
                    }
                }
            }
        }
        .footer {
            margin-top: 10vw;
            .buttonBox {
                width: 77vw;
                height: 10vw;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 auto;
                button {
                    width: 32.7vw;
                    height: 10.1vw;
                    background-color: rgba(255, 255, 255, 0.8);
                    color: $color;
                    box-shadow: 0vw 0.5vw 0.6vw 0.1vw rgba(0, 0, 0, 0.39);
                    border-radius: 5vw;
                    border: none;
                    transition: all 0.1s;
                    font-weight: bold;

                    &:active {
                        transform: translateY(3px);
                        box-shadow: none;
                    }
                }
            }
        }
    }
}
